<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/head_bottom.css">
  <link rel="stylesheet" type="text/css" href="css/detail_pages.css">
  <title></title>
</head>
<body onload="showCake(_pid)">
  <header id="global_header">
    <div class="fix_header">
      <div class="logo">
        <img src="img/yhxe.png" alt="">
      </div>
      <nav class="global_nav">
        <ul class="nav_ul">
          <li><a href="index.html" target="_parent" class="left">首页</a></li>
          <li><a href="category.html" id="a_cake" onclick="search_cake()" class="left">蛋糕</a></li>
          <li><a href="snacks.html" class="left">零食</a></li>
          <li><a href="#" class="left">积分兑换</a></li>
        </ul>
      </nav>
      <div class="right_content">
        <div>
          <a href="shoppingCart.html" target="_blank"><img src="img/20201214231042.png" alt=""></a>
        </div>
        <div>
          <a href="login.html" target="_blank"><img src="img/20201214230952.png" alt=""></a>
        </div>
      </div>
    </div>
  </header>
  <div id="main">
    <div class="coke_detail">
      <!--主图-->
      <div id="coke_lg_img"></div>
      <div class="detail_content">
        <div class="left_wrap">
          <div class="one_line">
            <p id="pname"></p>
            <p id="price"></p>
          </div>
          <div class="two_line">
            <p id="sub_title" class="sub_title"></p>
          </div>
        </div>
        <div class="right_wrap">
          <div class="eat_num">
            <p class="spec_notice">建议使用人数</p>
          </div>
          <div class="spec_value">
            <a href="javascript:void(0)">2-4人食</a>
            <a href="javascript:void(0)">5-8人食</a>
            <a href="javascript:void(0)">10-12人食</a>
            <a href="javascript:void(0)">15-20人食</a>
          </div>
          <div class="spec_wrap">
            <p class="ware_num">
              <i></i>
              <span>含5套餐具</span>
            </p>
            <p class="size">
              <i></i>
              <span>约13×13×4cm</span>
            </p>
            <p class="weight">
              <i></i>
              <span>约480g</span>
            </p>
            <p class="sweet">
              <span>甜度：</span>
              <i></i>
            </p>
          </div>
          <div class="buy">
            <a href="javascript:void(0)" onclick="addShopCart()">添加购物车+</a>
            <a href="javascript:void(0)" onclick="addShopCart()">立即购买</a>
          </div>
        </div>
      </div>
      <!-- 详情图-->
      <div id="detail_img"></div>
    </div>

  </div>
  <!--  页脚部分-->
  <footer>
    <div class="footer_content">
      <div class="footer_left">
        <div class="footer_nav">
          <a href="#">小e公告</a>
          <a href="#">关于小e</a>
          <a href="#">客服服务</a>
          <a href="#">食品经营许可证</a>
          <a href="#">生产许可证</a>
          <a href="#">预付费卡协议</a>
          <a href="#">联系我们</a>
        </div>
        <p class="footer-tel"><span>如有问题，请联系在线客服。工作时间：9：00-21:00</span></p>
        <div class="footer_copy">
          <p>
            <span>copyright©2010-2020 xiaoe.com版权所有</span><span>沪ICP备10211730号</span><span>沪公网安备31010402003364号</span>
          </p>
        </div>
      </div>
      <div class="footer_img">
        <div class="bottom_image1"><img src="img/20201221131321.jpg" ></div>
        <div class="bottom_image2"><img src="img/20201215215306.png" ></div>
      </div>
    </div>
  </footer>

  <!--	js脚本-->
  <script>
    //获取当前网页的url
    let url=window.location.href;
    //分割出？后面的值（pid）;
    let url_arr=url.split('?')
    let _pid=url_arr[1];
    //将获取到的pid传入查询函数
    function showCake(){
      let xhr=new XMLHttpRequest();
      xhr.onreadystatechange=function(){
        if(xhr.readyState===4 && xhr.status===200){
          let r = JSON.parse(xhr.responseText);
          let _sweetness="";
          if(r[0].sweetness===1){
            _sweetness="☆";
          }else if(r[0].sweetness===2){
            _sweetness="☆☆";
          }else if(r[0].sweetness===3){
            _sweetness="☆☆☆";
          }
          let meal_num=1;
          let _price=r[0].price;
          coke_lg_img.innerHTML=`<img class="img_lg" src="./img/${r[0].lg}">`;
          pname.innerHTML=r[0].name;
          price.innerHTML="￥"+_price;
          sub_title.innerHTML=r[0].title;
          // weigth.innerHTML=`重量：${r[0].weigth} 克`;
          // sweetness.innerHTML="甜度："+_sweetness;
          let img_str="";
          img_str=`
            <img src="./img/${r[0].detail_one}">
            <img src="./img/${r[0].detail_two}">
            <img src="./img/${r[0].detail_three}">`;
          detail_img.innerHTML=img_str;
        }
      }
      xhr.open('get',`/index/detail_pages/${_pid}`,true);
      xhr.send();
    }

    function addShopCart(){

      let xhr=new XMLHttpRequest();
      xhr.onreadystatechange=function(){
        console.log(1)
        if(xhr.readyState===4 && xhr.status===200){
          console.log(2)
          let r=xhr.responseText;
          if(r==="1"){
            alert("添加商品成功！");
          }
        }
      };
      xhr.open('get',`/index/add_shopCart/${_pid}`,true);
      xhr.send();
    }
  </script>
</body>
</html>